<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 首页模块
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="margin-bottom20 margin-top20">
				<el-button type="primary" @click="handleEdit">新建</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header-style">
				<el-table-column prop="name" label="名称"></el-table-column>
				<el-table-column label="图标">
					<template slot-scope="scope">
						<el-image v-if="scope.row.icon!=null" class="table-td-thumb" :src="scope.row.icon"
							:preview-src-list="[scope.row.icon]"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="是否显示" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" @change="clickStatus(scope.row,1)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-edit" @click="clickDel(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="`${title}${form.name||''}`" :visible.sync="editVisible" width="40%">
			<el-form label-width="80px">
				<el-form-item label="模块名称">
					<el-input v-model="form.name" maxlength="6" placeholder="请输入模块名称"></el-input>
				</el-form-item>
				<el-form-item label="上传图标">
					<el-image v-if="form.icon" class="width100 height100 radius6 margin-right10" :src="form.icon"
						:preview-src-list="[form.icon]"></el-image>
					<el-button type="text" @click="clickImg">点击图片库</el-button>
				</el-form-item>
				<el-form-item label="状态显示">
					<el-switch v-model="form.status"></el-switch>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
				<el-form-item label="关联内容">
					<el-select v-model="form.content" filterable remote reserve-keyword placeholder="请输入选择" class="width100Per">
						<el-option v-for="item in pageExamData" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		name: 'setting',
		components: {
			imgLibrary
		},
		data() {
			return {
				tableData: [],
				editVisible: false,
				pageTotal: 0,
				form: {
					status: false
				},
				title: '',
				pageExamData: [],
			};
		},
		created() {
			this.getData();
			this.getPageExamPaper()
		},
		methods: {
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			async clickDel(id) {
				const res = await this.$postForm('/admin/moduleType/delete', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
					this.editVisible = false
				}
			},
			async clickStatus(row, type) {
				let status = row.status ? 1 : 0
				let params = row
				params.status = status
				console.log(params.status, status, "ppp")
				const res = await this.$post('/admin/moduleType/update', params)
				if (res.code == 1000) {
					this.$message.success('操作成功');
					this.getData();
				}
			},
			async getPageExamPaper() {
				const res = await this.$post(`/admin/examPaper/pageExamPaper?pageNumber=1&pageSize=9999`, {
					isChild: false
				})
				this.pageExamData = res.data.list
			},
			//获取选中的图片
			handleImgOk(data) {
				this.$set(this.form, 'icon', data)
			},
			async getData() {
				const res = await this.$get('/admin/moduleType/getAll')
				if (res.code == 1000) {
					this.tableData = res.data;
					for (const item of this.tableData) {
						item.status = item.status ? true : false
					}
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.getData();
			},
			// 编辑操作
			handleEdit(row) {
				if (row.id) {
					this.form = JSON.parse(JSON.stringify(row));
					this.form.status = this.form.status ? true : false
					this.title = "编辑"
					if (this.form.icon) {
						this.fileList = [{
							url: this.form.icon
						}]
					}
				} else {
					this.title = "新建首页模块"
					this.form = {}
					this.fileList = []
				}
				this.editVisible = true;
			},
			// 保存编辑
			async saveEdit() {
				let vm = this;
				if (this.$.isEmpty(this.form.icon)) {
					this.$message.warning('请上传图标!')
					return
				}
				switch (this.form.name) {
					case '每日一练':
						this.form.type = 1
						break
					case '名师题库':
						this.form.type = 2
						break
					case '历年真题':
						this.form.type = 3
						break
					case '简章公告':
						this.form.type = 4
						break
					case '模考大赛':
						this.form.type = 5
						break
					case '我的错题':
						this.form.type = 6
						break
					case '收藏的题':
						this.form.type = 7
						break
					case '我的笔记':
						this.form.type = 8
						break
					case '做题记录':
						this.form.type = 9
						break
					case '招教商城':
						this.form.type = 10
						break
				}
				this.form.status = this.form.status ? 1 : 0
				const res = await this.$post('/admin/moduleType/update', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
					this.editVisible = false
				}
			}
		}
	};
</script>

<style scoped>

</style>